<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/common.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta charset="utf-8">
    <title>药品费用记录界面</title>
    <link rel="stylesheet" href="<%=path %>/plugins/layui/css/layui.css" media="all">
  </head>
  	<script src="<%=path%>/plugins/layui/layui.js"></script>

<body>
	<!-- 搜索模块 -->
	<div class="demoTable" style="margin-top:7px;margin-left:50px">
	  <div class="layui-inline layui-icon layui-icon layui-icon-search" 
	     style="font-size: 20px; color: #2B2B2B;font-weight:bold">模糊搜索：
	  </div>
	  
	  <div class="layui-inline">
	    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
	  </div>
	  
	  <span class="layui-badge-dot"></span>
	  
      <div class="layui-inline layui-icon layui-icon layui-icon-release" 
	     style="font-size: 20px; color: #2B2B2B;font-weight:bold"> 时间段查询：
	  </div>
	  
      <div class="layui-input-inline">
        <input type="text" class="layui-input" style="width: 330px" id="time" placeholder="  开始 到 结束 ">
      </div>
      
	  <button class="layui-btn" data-type="reload">搜索</button>

	</div>
	<!-- 表格体 lay-filter相当于id -->
<div class="tableWithoutHead">
	<table id="medFeeTable" class="tableWithoutHead" lay-filter="tableDemo"></table>
</div>
</body>

<script>
	//调用模块
	layui.use(['table','jquery','laydate','laytpl'], function(){
	  var table = layui.table;
	  var laydate = layui.laydate;
	  var $ = layui.jquery;
	  var laytpl = layui.laytpl;
	  
	  //时间范围
	  laydate.render({
	  	elem: '#time',
	  	type: 'datetime',
	  	range: '至',
	  	done: function(value){
	  	
	  	}
	  });
		  
	  //定义属性
	  table.render({
	    elem: '#medFeeTable'//关联表格
	    ,url: '<%=path%>/biz/Recipe_getByPagerRec.action' //数据接口
	    ,page: true //开启分页
	    ,done: function (res, curr, count) {
                var tableElem = this.elem.next('.layui-table-view');
                count || tableElem.find('.layui-table-header').css('overflow', 'auto');
                layui.each(tableElem.find('select'), function (index, item) {
                    var elem = $(item);
                    elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                });
				form.render();
            }
	    ,cols: [[ //表头
	       {type:'numbers'}
	      ,{type:'checkbox', field: "left"}
	      ,{field: 'regId', title: '挂号编号', width: 120, align:'center', sort: true}
	      ,{field: 'treatId', title: '诊疗编号', align:'center', sort:true}
	      ,{field: 'stuName', title: '姓名', align:'center',  sort:true, templet: function(data){
	      	    var color = "#D2691E";
	      		return '<span style="font-weight: bold ;color: '+color+';">'+data.stuName+'</span>';
	      }}
	      ,{field: 'recipeId', title: '处方编号', align:'center', width: 210, event: 'selectRecId', templet: '#selectTpl'}
	      ,{field: 'treatResult', title: '药名/单价/数量/合价', width: 250, align:'center', event: 'medInfo', templet: function(data){
	      		var recipeId = jsons[''+data.treatId+''];
				//如果一诊编对应多处编，则取第一个处编用于显示药品信息
	      		recipeIdone = recipeId[0];
	      		var meddata = json[''+recipeIdone+''];
	      		console.log(meddata);
	      		var timo = meddata.replace(/,/g, '<br>').replace(']', '').replace('[','')+"<br>此处方药品合价为："+recIdFeeJsons[''+recipeIdone+'']+"元";
	      		return '<span style="font-weight: bolder ;color: #8B2252;">'+timo+'</span>';
	      }, sort:true}
	      ,{field: 'totalFee', title: '总价/元', align:'center', event: "totalFee", sort:true, templet: function(data){
	      		var timo =  treIdFeeJsons[''+data.treatId+''];
	      		return '<span style="font-weight: bolder ;color: #CD0000;">'+timo+'</span>';
	      }}
	      ,{field: 'treatDate', title: '诊疗完成时间', align:'center', templet: function(d){
	      		//格式化时间 
	      		var date = new Date(d.treatDate.time).toLocaleDateString();
	      		return '<span style="font-weight: bolder ;color: #66CD00;">'+date+'</span>';
	      }, sort: true}
	      ,{field: 'operate', title: '操作', field: "right", align:'center', templet: '#barDemo'}//这里的toolbar值是模板元素的id选择器
	    ]]
	    ,id: 'testReload'
	    ,height: 'full-80' //分页块与表格之间的距离
	    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
	    
	  });
//监听表格事件
table.on('tool(tableDemo)',function(obj){  //tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	var data = obj.data;
    if(obj.event === 'selectRecId'){
		var tr = obj.tr; //获得当前行 tr 的DOM对象
      	var trNum = Number($(tr).attr("data-index"))+1;//这里是当前行号
    	var recipeId = $("#recipeIdSelect"+trNum+"").val();
    	//根据所选处编获取药品信息
    	var medInfo = json[''+recipeId+''];
    	//"/g匹配全部"
    	var medInfoo = medInfo.replace(/,/g, '<br>').replace(']', '').replace('[','')+"<br>此处方药品合价为："+recIdFeeJsons[''+recipeId+'']+"元";
		var timo =  '<span style="font-weight: bolder ;color: #8B2252;">'+medInfoo+'</span>';
		//同步更新表格和缓存对应的值
        obj.update({
          treatResult: timo
        });
      } else if(obj.event === 'consult'){
      		message("待完善");
      } else if(obj.event === 'totalFee'){
      		message("看毛啊");
      }
	});
});
	
  //信息提示弹出层
  function message(data){
      layer.open({
        content: '<div style="padding: 20px 100px;">'+ data +'</div>'
        ,btn: '朕知道啦'
        ,btnAlign: 'c' //按钮居中
        ,shade: 0 //不显示遮罩
        ,yes: function(){
          layer.closeAll();
        }
      });
  }


	//为时间段加点杂碎并返回，防止被同化
	function trimTime(strDate) { 
	    if(null==strDate || ""==strDate){  
	        return "";  
	    }
	    return "+"+strDate;
	};
	
	//全局变量
	var selectId = 0;//select处编选择下拉Id自增，区别id
	var data = '${recMedListJson}' //处编-药品集合
	var datas = '${treIdRecIdListJson}'  //诊编-处编集合
	var treIdFeeJson = '${treIdMedFeeJson}'; //诊编对应药品总价
	var recIdFeeJson = '${recIdMedFeeJson}'; //处编对应药品总价
	var json = eval("("+data+")"); 
	var jsons = eval("("+datas+")"); 
	var treIdFeeJsons = eval("("+treIdFeeJson+")");
	var recIdFeeJsons = eval("("+recIdFeeJson+")");

</script>


<script type="text/html" id="barDemo">
	<sec:authorize ifAnyGranted="medFeeConsult">
  	<a class="layui-btn layui-btn-xs" lay-event="consult">详情</a>
	</sec:authorize>
</script>
<script type="text/html" id="selectTpl">
	{{# selectId = selectId + 1 }}
	{{# }}
	<select id="recipeIdSelect{{ selectId }}">
	{{# var treatId = d.treatId }}

	{{# var recipeList = jsons[''+d.treatId+''] }}
	{{# layui.each(recipeList, function(index, item){ }}
		<option value="{{ item }}">{{ recipeList[index] }}</option>
	{{# }); }}
	</select>
</script>


</html>
